<template>
  <div id="app">
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
    <SchoolComponent ref="sch"/>
  </div>
</template>

<script>
  import SchoolComponent from './components/SchoolComponent.vue';

  export default {
    name: 'App',
    components: { SchoolComponent },
    data() {
      return {
        msg:'欢迎学习 Vue!'
      }
    },
    methods: {
      showDOM() {
        console.log(this.$refs.title)   // 真实DOM元素 
        console.log(this.$refs.btn)     // 真实DOM元素
        console.log(this.$refs.sch)     // School 组件的实例对象(vc)
      }
    }
}
</script>


